<template>
  <div>
    <div>
      <el-input
        placeholder="请输入内容"
        v-model="inpunt"
        class="elinput"
        clearable
        @change="select()"
      >
      </el-input>

      <el-button type="primary" @click="select()" class="elinput_btn"
        >查询</el-button
      >
      <el-button type="primary" @click="dialogVisible = true">新增</el-button>
    </div>

    <!-- --------------------------------------------------------------------------------------- -->
    <!-- 弹窗add增加 -->
    <el-dialog
      title="增加图片路径"
      :visible.sync="dialogVisible"
      width="30%"
      class="popup"
      :before-close="handleClose"
      :append-to-body="true"
    >
      <!--  :append-to-body='true' 解决蒙版问题 -->
      <!-- from 表单 -->
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="图片路径">
          <el-input v-model="form.imgs"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addLB()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 弹窗结束 -->

    <!-- 弹窗update修改 -->
    <el-dialog
      title="修改图片路径"
      :visible.sync="dialogVisible_up"
      width="30%"
      class="popup"
      :before-close="handleClose"
      :append-to-body="true"
    >
      <!-- from 表单 -->
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="图片路径">
          <el-input v-model="form.imgs_up"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_up = false">取 消</el-button>
        <el-button type="primary" @click="updataLB_send()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 弹窗结束 -->
    <!-- --------------------------------------------------------------------------------------- -->

    <template>
      <!--  -->
      <!-- <el-table-column
      type="selection"
      width="55">
    </el-table-column> -->
      <el-table :data="date" border size="50" style="width: 100%">
        <!-- sortable 是排序 -->
        <el-table-column prop="rid" label="#" width="200"> </el-table-column>
        <!--  -->
        <el-table-column
          prop="r_img"
          label="图片路径"
          size="50"
          min-width="200"
          height="200"
        >
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="updataLB(scope.row)"
              >编辑</el-button
            >

            <!-- 删除确定项 -->
            <el-popconfirm title="这是一段内容确定删除吗？" @confirm="deleteLBsend()">
              <el-button slot="reference" type="danger" size="small" @click="deleteLB(scope.row)"
                >删除</el-button
              >
            </el-popconfirm>
            <!-- 删除确定项结束 -->
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        imgs: "",
        imgs_up: "",
      },
      deleterid:"",
      imgs_upid: "",
      dialogVisible: false,
      dialogVisible_up: false,

      date: [], //刚进来查询
      inpunt: "", //搜索框
    };
  },
  methods: {
    // 弹窗关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 添加轮播
    addLB() {
      if (this.form.imgs === "") {
        alert("输入不能为空");
        return;
      }
      this.axios
        .get(`/find/rotationadd?r_img=${this.form.imgs}`)
        .then((res) => {
          this.selectUrl();
        });
      this.form.imgs = "";

      this.dialogVisible = false;
    },
    // 修改轮播
    updataLB(a) {
      this.dialogVisible_up = true;
      this.form.imgs_up = a.r_img;
      this.imgs_upid = a.rid;
    },
    // 修改发送
    updataLB_send() {
      this.axios
        .get(
          `/find/rotationupdate?rid=${this.imgs_upid}&r_img=${this.form.imgs_up}`
        )
        .then((res) => {
          this.selectUrl();
        });
      
      this.dialogVisible_up = false;
    },
    // 删除传参
    deleteLB(a){
      this.deleterid=a.rid
    console.log(a.rid);
    },
    // 删除发送
    deleteLBsend(){
      

      this.axios.get(`/find/rotationdel?rid=${this.deleterid}`).then((res=>{
        this.selectUrl();
      }))
    },
    // 搜索
    select() {
      if (this.inpunt == "") {
        this.selectUrl();
      } else {
        this.axios
          .get(`/find/rotationSelect?rid=${this.inpunt}`)
          .then((res) => {
            this.date = res.data.data;
          });
      }
    },
    // 查看表单
    selectUrl() {
      this.axios.get("/find/rotation").then((res) => {
        this.date = res.data.data;
        console.log(res);
      });
    },
  },
  mounted: function () {
    this.selectUrl();
  },
};
</script>

<style scoped>
.elinput {
  width: auto;
}
.elinput_btn {
  margin-left: 10px;
}
</style>
